<template>
	<view class="easy_content" v-if="show">
		<view class="easy_input-box" :animation="platformIsAndroid ? animationData : null" :style="{bottom: platformIsAndroid ? undefined : bottomHeight + 'px'}">
			<view class="mask" v-if="showMask" />
			<textarea
				fixed
				maxlength="300"
				auto-height="true"
				:focus="focused"
				:adjust-position="adjustPosition"
				:show-confirm-bar="showConfirmBar"
				cursor-spacing="0"
				class="easy_text"
				id="textarea"
				@focus="onFocus"
				@blur="onBlur"
				@linechange="onLinechange"
        @input="onChange"
				:placeholder="placeholder"
				placeholder-class="easy_input_null"
				v-model="commentText"
			>
				<keyboard-accessory style="height: 1px;">
					<cover-view style="background: transparent;"></cover-view>
				</keyboard-accessory>
			</textarea>
			<view class="num-bt-container">
				<view class="content-number">{{numberWords}}</view>
				<view @click.stop="checkContent" class="easy_submit" :class="isEmptyComment ? 'easy-no-valid' : ''">发布</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'easy-entry',
		props: {
			placeholder: {
				type: String,
				default: '输入评论...'
			},
		},
		data() {
			return {
				showMask: false,
				commentText: '',
				show: false,
				focused: false,
				adjustPosition: false,
				showConfirmBar: false,
				bottomHeight: 0,
				animationData: '',
			}
		},
		computed: {
			/**
			 *检查是否为空输入
			 * */
			isEmptyComment() {
				const formatText = this.commentText.replace(/\s/g, '')
				return formatText.length === 0
			},
			platformIsAndroid() {
				const { platform = '' } = uni.getSystemInfoSync();
				console.log('platform', platform);
				return platform.toLowerCase() === 'android';
			},
			numberWords() {
				return this.commentText.length + '/300';
			},
		},
		methods: {
			onEntry() {
				// this.commentText = ''
				this.show = true;
				// set timer fix bug
				// this.$nextTick(() => {
				// 	this.focused = true;
				// });
				this.focused = true;
			},
			onFocus(e) {
				// console.log('e.detail', e.detail);
				let { height } = e.detail;
				this.focused = true;
				height -= 1;
				this.bottomHeight = height;
				const animation = uni.createAnimation({
					duration: 150,
					timingFunction: 'linear',
					delay: 0,
				});
				animation.translateY(-height - uni.upx2px(326)).step();
				this.animationData = animation.export();
			},
			onBlur(e) {
				this.focused = false;
				this.show = false;
				const animation = uni.createAnimation({
					duration: 150,
					timingFunction: 'linear',
					delay: 0
				});
				animation.translateY(0).step();
				this.animationData = animation.export();
			},
			onChange() {
      	this.commentText = this.commentText.substr(0, 300);
			},
			checkContent() {
				if (this.isEmptyComment) return
				this.$emit('send', this.commentText);
				this.commentText = '';
			},
			onLinechange({ detail: { lineCount } }) {
				// console.log('onLinechange', lineCount);
				this.showMask = lineCount > 3;
			},
		}
	}
</script>

<style scoped lang="less">
.easy_content {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.2);
	.easy_input-box {
		box-sizing: border-box;
		position: absolute;
		left: 0;
		bottom: -326rpx;
		width: 100%;
		padding: 20rpx 0;
		background: #fff;
		.mask {
			top: 20rpx;
			position: absolute;
			z-index: 9;
			left: 0;
			width: 100%;
			height: 32rpx;
			background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%);
		}
		.num-bt-container {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			border-top: 1rpx solid #F0F0F0;
			padding: 0 30rpx;
			.content-number {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #999999;
				line-height: 116rpx;
			}
			.easy_submit {
				width: 138rpx;
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #3470FF;
				text-align: right;
				line-height: 116rpx;
			}
			.easy-no-valid {
				color: #A5BDF2;
			}
		}
		.easy_text {
			width: calc(100vw - 60rpx);
			min-height: 132rpx;
			max-height: 120rpx;
			margin-bottom: 36rpx;
			font-family: PingFangSC-Regular;
			font-size: 26rpx;
			color: #1A1A1A;
			line-height: 44rpx;
			padding: 0 30rpx;
			caret-color:#3470FF;
		}
		.easy_input_null {
			font-family: PingFangSC-Regular;
			font-size: 26rpx;
			color: #CCCCCC;
			line-height: 26rpx;
		}
	}
}
</style>
